<template>
  <div>
    <el-carousel indicator-position="outside">
      <el-carousel-item v-for="item in mgs" :key="item">
        <img :src="item.imgs" />
      </el-carousel-item>
    </el-carousel>
    <div class="bx">
      <div class="content">
        <h1>最新产品</h1>
        <div class="san">
          <router-link to="" class="yi">
            <!-- <img src="../assets/tiao.jpg" alt="" /> -->
            <div class="lan">
              <div class="kuang">
                <h4>跳动时代(网页)</h4>
                <p>
                  跳动时代是一款一站式商标注册服务的产品,是企业产品的展示框,利用网络的多媒体技术,数据...
                </p>
              </div>
            </div>
          </router-link>
          <router-link to="" class="er1">
            <!-- <img src="../assets/shouji-1.jpg" alt="" /> -->
            <div class="lan1">
              <div class="kuang1">
                <h4>跳动时代(网页)</h4>
                <p>APP拉开视觉层级,做到差异化,增强对......</p>
              </div>
            </div>
          </router-link>
          <router-link to="" class="er2">
            <!-- <img src="../assets/shouji-2.jpg" alt="" /> -->
            <div class="lan1">
              <div class="kuang1">
                <h4>跳动时代(网页)</h4>
                <p>APP拉开视觉层级,做到差异化,增强对......</p>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
    <div class="bj">
      <div class="liu">
        <span class="sp1">关于我们</span>
        <span
          >UI设计,APP开发,UI设计师,app开发公司,app制作,UI设计公司,企业官网,商城小程序,企业网站建设,网站设计公司,企业网站,网站建设企业,系统开发app</span
        >
        <div class="ning">
          <p>
            宁夏银州通信技术咨询有限公司是一家从事通信建设工程设计及施工,信息网络集成,平台研发,致力于为各行业提供信息技术开发设计施工服务的现代化综合性高科技企业,其前身是一支拥有十多年通信工程施工经验的施工队伍,在2011年正式注册成立为公司,几经发展,公司目前注册资本3501万.
          </p>
        </div>
        <div class="ling">
          <div class="fen">
            <p><b>2011</b>年</p>
            <p>公司正式成立</p>
            <p>宁夏银州通信技术咨询有限公司</p>
          </div>
          <div class="fen">
            <p><b>50</b>强</p>
            <p>全国行业50强企业</p>
            <p>客户赞誉</p>
          </div>
          <div class="fen">
            <p><b>23</b>个</p>
            <p>业务领域</p>
            <p>全国服务体系覆盖范围</p>
          </div>
        </div>
      </div>
    </div>
    <div class="news bx">
      <div class="zhong">
        <h1>新闻中心</h1>
        <router-link to="" class="jian">
          <span><b>查看更多</b></span>
          <img src="../assets/jiantou.png" alt="" />
        </router-link>
      </div>
      <div class="wu">
        <div class="new-0">
          <router-link to="" class="new-1">
            <div class="he">
              <p class="p1">2021-12-17</p>
              <h2>核弹级漏洞Apache Log4j2曝光,或影响70%以上企业</h2>
            </div>
            <div class="mb-1">
              <p>近期,Apache Log4j2远程代码执行漏洞(CNVD...</p>
            </div>
          </router-link>
        </div>
        <div class="new-2">
            <router-link to="" class="new-3">
                <div class="zhuang">
                    <p>2021-12-17</p>
                    <h2>庄荣文:立足百年大党奋斗新起点 谱写网络强国建设新篇章</h2>
                    <p class="p1">党的十九届六中全会是在我们党成立一百年之际，党领导人民实现第...</p>
                </div>
                <div>
                    <button class="but">查看详情+</button>
                </div>
                <div class="mb-2">
                    <p>党的十九届六中全会是在我们党成立一百年之际，党领导人民实现第一个百年奋斗目标、向...</p>
                </div>
            </router-link>
        </div>
        <div class="new-4">
          <div class="liang">
              <router-link to="" class="new-5">
                  <div class="gong">
                      <p>2021-12-07</p>
                      <h2>工信部印发《"十四五"大数据产业发展规划》</h2>
                  </div>
                  <div class="mb-3">
                      <p>《规划》指出,大数据产业是以数据生成,采集...</p>
                  </div>
              </router-link>
          </div>
         <div class="liang feng">
             <router-link to="" class="new-5">
                 <div class="gong">
                      <p>2021-12-07</p>
                      <h2>合作重大工程将获政策支持 保监会出台险资支持实体经济细则</h2>
                  </div>
                  <div class="mb-3">
                      <p>【内容摘要】中国保监会发布《关于债权合作...</p>
                  </div>
             </router-link>
         </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  date() {
    return {
      mgs: [
        { imgs: requier("../assets/lun-1.png") },
        { imgs: requier("../assets/lun-2.png") },
        { imgs: requier("../assets/lun-3.png") },
        { imgs: requier("../assets/lun-4.png") },
        { imgs: requier("../assets/lun-5.png") },
      ],
    };
  },
};
</script>
<style scoped>
.el-carousel__item img {
  width: 1500px;
  height: 660px;
}
.bx {
  width: 1300px;
  margin: 0 auto;
}
.content {
  margin-bottom: 50px;
}
.san {
  margin-top: 20px;
  height: 830px;
  display: flex;
  justify-content: space-between;
}
.yi {
  background-image: url(../assets/tiao.jpg);
  background-repeat: no-repeat;
  background-size: 650px;
  width: 655px;
  transition: all 1s;
  height: 800px;
  border: 2px solid rgb(235, 234, 234);
}
.yi:hover .lan {
  background-color: rgb(43, 43, 133);
  color: white;
}
.yi:hover {
  box-shadow: 2px 1px 5px #888888;
  background-size: 680px;
}
.er1 {
  background-image: url(../assets/shouji-2.jpg);
  background-repeat: no-repeat;
  background-size: 300px;
  transition: all 1s;
  width: 300px;
  height: 800px;
  border: 2px solid rgb(235, 234, 234);
}
.er1:hover .lan1 {
  background-color: rgb(43, 43, 133);
  color: white;
}
.er1:hover {
  box-shadow: 2px 1px 5px #888888;
  background-size: 320px;
}
.er2 {
  background-image: url(../assets/shouji-1.jpg);
  background-repeat: no-repeat;
  background-size: 300px;
  width: 300px;
  transition: all 1s;
  height: 800px;
  border: 2px solid rgb(235, 234, 234);
}
.er2:hover .lan1 {
  background-color: rgb(43, 43, 133);
  color: white;
}
.er2:hover {
  box-shadow: 2px 1px 5px #888888;
  background-size: 320px;
}
.lan {
  width: 655px;
  transition: all 1s;
  color: black;
  margin-top: 727px;
}
.kuang {
  line-height: 30px;
  width: 600px;
  height: 75px;
  margin: 0 auto;

  font-size: 14px;
  margin-top: 10px;
}
.lan1 {
  width: 300px;
  margin-top: 620px;
  transition: all 1s;

  color: black;
}
.kuang1 {
  line-height: 30px;
  width: 270px;
  height: 75px;
  margin: 0 auto;
  font-size: 14px;
  margin-top: 10px;
}
.bj {
  margin-bottom: 50px;
  width: 100%;
  color: white;
  height: 520px;
  background-image: url(../assets/about.jpg);
}
.liu {
  padding-top: 40px;
  width: 680px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 30px;
}
.liu .sp1 {
  font-size: 40px;
}
.ning {
  padding-top: 30px;
  width: 680px;
  line-height: 30px;
  font-size: 15px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgb(145, 145, 145);
}
.ling {
  padding-top: 30px;
  display: flex;
  font-size: 15px;
  justify-content: space-between;
}
.ling b {
  font-size: 50px;
}
.zhong {
  display: flex;
  justify-content: space-between;
}
.zhong h1 {
  margin-bottom: 20px;
}
.jian {
  color: black;
}
.jian img {
  width: 15px;
  margin-left: 10px;
}
.wu {
  width: 1300px;
  margin-bottom: 60px;
  height: 680px;
  display: flex;
  justify-content: space-between;
}
.new-0 {
  width: 340px;
  position: relative;
  transition: all .5s;
  height: 675px;
  background-image: url(../assets/dong-1.jpg);
  background-repeat: no-repeat;
  background-size: 470px;
}
.new-2{
  width: 600px;
  position: relative;
  transition: all .5s;
  height: 675px;
  background-image: url(../assets/dong-2.jpg);
  background-repeat: no-repeat;
  background-size: 670px;
}
.new-4{
  width: 340px;
  height: 675px;
  display: flex;
  flex-wrap: wrap;
  
  align-content: space-between;
}
.new-4 .liang{
    position: relative;
    width: 340px;
    height: 325px;
    background-color: rgb(10, 103, 179);
}
.new-5{
    color: white;
}
.gong{
    width: 300px;
    margin: 0 auto;
    padding-top: 80px;
     transition: all .5s;
}
.gong h2{
    padding-top: 30px;
}
 .new-0:hover{
  background-size: 490px;
}
.new-1 {
  color: black;
}
.he{
    width: 300px;
    margin: 0 auto;
    padding-top: 80px;
    transition: all .5s;
}
.zhuang{
    width: 560px;
    margin: 0 auto;
    padding-top: 80px;
    transition: all .5s;
}
.zhuang h2{
    margin: 40px 0;
}
.zhuang .p1{
    font-size: 18px;
}
 .new-0:hover .he{
    padding-top: 120px;
}
.new-2:hover .zhuang{
    padding-top: 100px;
}
.new-5:hover .gong{
    padding-top: 100px;
}
.he h2{
    margin-top: 40px;
}
.mb-1{
    position: absolute;
    bottom: 0;
    width: 340px;
    height: 50px;
    line-height: 50px;
    background-color: rgba(0, 0, 0, 0.404);
    color: white;
}
.mb-2{
     position: absolute;
    bottom: 0;
    width: 600px;
    height: 50px;
    line-height: 50px;
    background-color: rgba(0, 0, 0, 0.404);
    color: white;
}
.mb-2 p{
    font-size: 14px;
}
.mb-3{
     position: absolute;
    bottom: 0;
    width: 340px;
    height: 50px;
    line-height: 50px;
    background-color: rgba(0, 0, 0, 0.404);
    color: white;
}
.new-3{
    color: white;
}
.but{
    position: absolute;
    top: 400px;
    left: 50px;
    width: 150px;
    height: 50px;
    background-color: rgb(10, 103, 179);
    border: transparent;
    color: white;
    font-size: 17px;
}
.feng{
    background-image: url(../assets/dong-3.jpg);
    background-repeat: no-repeat;
    background-size: 390px;
    transition: all .5s;
}
.feng:hover{
    background-size: 450px;
}
</style>